import { computed, reactive,ref } from "vue"

/**
 * 自定义Hook来计算获取data数组中某项属性(可拓展其他属性)供视图使用
 * @param {*} data props定义的data数组数据
 * @param {*} rightListData 右侧列表栏的数据
 * @returns {*} 对象包含计算后的属性
 */
 export const useLeftData = (data:any,rightListData,checkedData)=>{
        // 数据格式[{id:1,name:名字}] filter= rightListData.find
        // 第一步 定义响应式左侧数据
       const curentData = reactive(data);
        // 第二步 怎么做数据 更新
        const leftListData = computed(()=>{
                //从右侧栏的列表数据里查找是否符合id的那一项
                return curentData.filter((leftItemData)=>{
                        const isFind = rightListData.value.find(({id})=>leftItemData.id ===id);
                        //找不到时 返回找不到的其余列表项内容
                        if(!isFind) return leftItemData
                  })
        })
        //中间左右侧按钮是否禁用属性
        const btnStatus = computed(()=>{
                return {
                        //右侧容器没有内容时禁止点击左侧按钮
                        rightBtn: checkedData.left.length === 0,
                        leftBtn: checkedData.right.length === 0
                }
        })
        return [leftListData,btnStatus]
 }

 /**
 * 获取响应式包装和初始化右侧栏数据和设置该数据的方法供视图使用
 * @param {*} rightData 右侧初始数据
 * @param {*} checkedData 某一侧选中项的容器数据
 * @returns [rightListData, addRightData, delRightData]:[右侧栏数据, 增数据的方法, 删数据的方法]
 */
 export const useRightData = (rightData:any,checkData:any, )=>{
        //[{id:1,label:名字1},{id:2,label:名字2}] 
        let rightListData = ref(rightData);
        //将左侧某项移动到右侧容器中
        const addRightData = (newData)=>{ 
                // rightListData = [...rightListData, ...newData];
                rightListData.value.push(...newData)
                //移动完毕时清空左侧容器的某项
                checkData.left = [];
        }
        // （删除） 将右侧容器中的某项移动至左侧容器
        const delRightData = (newData)=>{
                newData.forEach((data)=>{
                        //过滤不符合的项
                        rightListData.value = rightListData.value.filter((item)=> data.id!==item.id)
                }) 
                 //移动完毕时清空右侧容器的某项
                 checkData.right = [];
        }

        return [rightListData, addRightData, delRightData]
 }


 /**
 * 获取响应式包装和选中数据的左右容器和设置该数据的方法供视图使用
 * @returns  [checkedData, addCheckedData, delCheckedData]:[选中的左右容器, 增数据的方法, 删数据的方法]
 */
 export const useCheckData = ()=>{
        // 选种数据结构
      const checkedData =  reactive({
              left:[],//左边的选种数据
              right:[]
       })
        // 增加 
        const addCheckedData = (item,leftOrRight)=>{
                if(leftOrRight ==='left'){
                    checkedData.left.push(item);
                }else{
                     checkedData.right.push(item);   
                }
      }
      // 删除
      const delCheckedData = (data,leftOrRight)=>{
        
        if(leftOrRight ==='left'){
                checkedData.left = checkedData.left.filter(item=>(item.id !== data.id))
        }else{
                checkedData.right = checkedData.right.filter(item=>(item.id !== data.id))   
        } 
      }

      return [checkedData, addCheckedData, delCheckedData]
 }